<template>
  <div style="padding:20px">
    <el-row>
      <el-col :span="24">
        <fieldset style="width:80%">
          <legend style="margin-left:40px;">
            <h1>基本信息</h1>
          </legend>
          <el-form :model="form" ref="form" label-width="200px">
            <el-form-item v-for="(v,k,i) in form" :label="labels[i]" :key="i" v-if="k!=='spEventID'&&k!=='spEventEndDateTime'&&k!=='spEventStatusTypeValue'&&k!=='currentResponsiblePersonCertID'&&k!=='currentResponsiblePersonName'&&k!=='currentResponsiblePersonContact'"
              :prop="k">
              <el-select v-if="k=='spEventKind'" v-model="form[k]">
                <el-option :value="1" label="一般事件"></el-option>
                <el-option :value="2" label="重大事件"></el-option>
              </el-select>
              <el-select v-else-if="k=='spEventTypeValue'" v-model="form[k]">
                <el-option v-for="(v,i) in EventType" :key="i" :value="v.speventTypeValue" :label="v.speventTypeName"></el-option>
              </el-select>
              <el-select v-else-if="k=='spEventStatusTypeValue'" v-model="form[k]">
                <el-option v-for="(v,i) in StatusType" :key="i" :value="v.speventStatusTypeValue" :label="v.speventStatusTypeName"></el-option>
              </el-select>
              <el-select v-else-if="k=='netGridID'" v-model="form[k]">
                <el-option v-for="(v,i) in netGridType" :key="i" :value="v.netGridID" :label="v.netGridName"></el-option>
              </el-select>
              <el-date-picker type="datetime" v-else-if="k=='spEventStartDateTime'||k=='spEventEndDateTime'" v-model="form[k]"></el-date-picker>
              <el-input v-else-if="k=='currentRemarks'||k=='spEventContent'" v-model="form[k]" type="textarea" placeholder=""></el-input>
              <el-radio-group v-else-if="k=='sex'" v-model="form[k]">
                <el-radio-button :label="1">男</el-radio-button>
                <el-radio-button :label="0">女</el-radio-button>
              </el-radio-group>
              <el-input v-else style="width:600px" v-model="form[k]"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="updateRecord('form')">更新</el-button>
              <el-button type="warning" @click="$router.push('manage')">返回</el-button>
            </el-form-item>
          </el-form>
        </fieldset>
      </el-col>
      <el-col :span="24">
        <fieldset style="width:80%">
          <legend style="margin-left:40px;">
            <h1>当事人</h1>
          </legend>
          <div v-for="(saform,i) in invokePerson" :key="i" style="margin-top:10px;">
            <el-alert :title="'当事人('+(i+1)+')'" type="info" style="font-size:20px;color:whitesmoke" :closable="false">
              <el-button type="danger" size="small" style="float:right" @click="deletePerson(saform.spEPersonsID)">
                删除
              </el-button>
            </el-alert>
            <div style="border:1px;background-color:whitesmoke;padding:5px;margin-top:10px">
              <el-form :model="saform" style="border:1px;margin-top:5px" label-width="120px" label-suffix="：">
                <el-form-item v-for="(value,key,index) in saform" :key="index" v-if="key!=='spEPersonsID'&&key!=='spEventID'" :label="label[index]"
                  :prop="key">
                  <el-input v-model="saform[key]"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="danger" @click="updateSA(saform)">更新信息</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div v-if="invokePerson.length==0" style="text-align=center">
            <span style="color:#909399;font-size:30px;margin-left:520px">尚无当事人</span>
          </div>
          <div style="width:100%;">
            <el-button style="float:right" type="primary" @click="addSAPerson()">
              <i class="fa fa-plus fa-lg"></i>
              新增当事人
            </el-button>
          </div>
        </fieldset>

      </el-col>
    </el-row>

    <el-dialog title="添加当事人" :visible.sync="dialogVisible" size="tiny">
      <el-form :model="SAForm" label-position="left">
        <el-form-item v-for="(v,k,i) in SAForm" :key="i" :label="label2[i]">
          <el-input v-model="SAForm[k]" v-if="k=='spEventID'" disabled></el-input>
          <el-input v-model="SAForm[k]" v-else></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveSA()">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import * as api from "@/api/skynetManage";
  import * as api2 from '@/api/zonghezhili/duiwujianshe'

  export default {
    data() {
      return {
        dialogVisible: false,
        ImageList: [],
        videoList: [{
          id: '',
          url: ''
        }],
        invokePerson: [],
        num: 4,
        form: {
          spEventID: '',
          spEventName: "", //'事件名称',
          spEventKind: "", //'事件性质，如1=一般事件；2=重大事件；等',
          spEventTypeValue: "", //'事件类型，如杀人、放火、抢劫等',
          spEventContent: "",
          spEventStartDateTime: "",
          spEventEndDateTime: "",
          spEventHappenLongitude: "", //'地理经度信息',
          spEventHappenLatitude: "", //'地理纬度信息',
          spEventStatusTypeValue: "", //'当前事件处理的最新状态',
          currentRemarks: "",
          currentResponsiblePersonCertID: "", //'当前经办人员身份证号',
          currentResponsiblePersonName: "", //'当前经办人员姓名',
          currentResponsiblePersonContact: "", //'经办人员联系方式',
          netGridID: ''
        },
        labels: ["编号", "事件名称", "事件性质", "事件类型", "事件内容", "事件开始时间",
          "事件结束时间", "经度", "纬度", "事件最新处理状态", "当前备注", "当前经办人员身份证号", "当前经办人员姓名", "经办人员联系方式", "网格"
        ],
        SAForm: {
          spEventID: "", //'社会安全事件ID'
          involvedPersonCertID: "", //
          involvedPersonName: "", //'当事人姓名'
          involvedPersonRemark: "", //'当事人备注'
          involvedPersonContact: "" //'当事人号码'
        },
        label: ["编号", "事件编号", "当事人身份证", "当事人姓名", "当事人备注", "当事人号码"],
        label2: ["事件编号", "当事人身份证", "当事人姓名", "当事人备注", "当事人号码"],
        GridID: [],
        StatusType: [],
        EventType: [],
        netGridType: []
      };
    },
    methods: {
      saveSA() {
        api.addSPEventInvolvedPersons(this.SAForm).then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "当事人添加成功!"
            });
            var copy = Object.assign({}, this.SAForm);
            this.invokePerson.push(copy)
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        });
      },
      addSAPerson() {
        this.SAForm.spEventID = this.form.spEventID
        this.dialogVisible = true
      },
      updateSA(query) {
        api.updateSPEventInvolvedPersons(query).then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "当事人修改成功!"
            });
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        })
      },
      deletePerson(id) {
        api.deleteSPEventInvolvedPersons(id).then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "当事人删除成功!"
            });
            for (let i = 0; i < this.invokePerson.length; i++) {
              if (this.invokePerson[i].spEPersonsID == id) {
                this.invokePerson.splice(i, 1);
                break;
              }
            }
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        })
      },
      changeDate(val) {
        this.form.ssEventStartDateTime = val;
      },
      updateRecord() {
        api.updateSPEvent(this.form).then(res => {
          if (res.data) {
            this.$message({
              type: "success",
              message: "更新成功!"
            });
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        });
      }
    },
    mounted() {
      let queryId = this.$route.query.id
      api.getSPEventCode().then(res => {
        this.StatusType = res.data.SkynetPatrolEventStatusType
        this.EventType = res.data.SkynetPatrolEventType
      })
      api2.fetchServedPersonManageTypes().then(res => {
        this.netGridType = res.data.netGrid
      })
      api.getDetailToUpdate(queryId).then(res => {
        this.form = res.data.basic
        this.invokePerson = res.data.involvedPersons
      })
    }
  };

</script>

<style scoped>


</style>
